<template>
  <div>
    <a-modal title="修改文案图" :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="保存设置" class="copywriting" :maskClosable="false">
      <div class="upload-tips tab-middle-tips mb10">
        <div>
          修改操作需在产品套餐提交SPU审核前或驳回之后进行，上线抖音产品修改保存后需要重新提交SPU审核，抖音平台才能重新对内容进行审核
        </div>
      </div>
      <div class="imgmain">
        <span><span style="color:#F5894E">*</span> 封面图片：</span>
        <div class="upload">
          <div style="display:flex">
            <upload :limit="1" accept=".gif,.png,.jpg" :value="info.faceImg" :action="action" @input="input" :Proportion="[2, 1]" :size="3" />
            <cropperupload :fixedNumber="fixedNumber" :optionHeigth="optionHeigth" :optionWidth="optionWidth" @getCrofile="getCrofile" />
          </div>
          <p class="p">宽高比2:1，建议1200像素*600像素，文件大小3M以内 / jpg、png、gif格式(最多1张)</p>
        </div>
      </div>
      <div class="imgmain" style="margin-top:20px">
        <span><span style="color:#F5894E">*</span>Banner图：</span>
        <div class="upload bottom">
          <div style="display:flex">
            <upload :limit="6" accept=".gif,.png,.jpg" :value="info.loopImageList" @input="inputlist" :action="action" :Proportion="[1.5, 1]" :size="3" />
            <cropperupload :fixedNumber="fixedNumberlist" :optionHeigth="optionHeigthList" :optionWidth="optionWidthList" @getCrofile="getCrofileList" :disabled="disableCro" />
          </div>
          <p class="p">宽高比1.5:1，建议900像素*600像素，大小3M以内 / jpg、png、gif格式(至少2张，最多6张)</p>
        </div>
      </div>
    </a-modal>
    <cropperImg :cropperImg="cropperImg" />
  </div>
</template>

<script>
import upload from '@/components/upload/upload.vue'
import cropperupload from '@/components/upload/cropperupload.vue'
import cropperImg from '@/components/cropperImg.vue'
import { uploadfile, bannerlist, bannerupdate } from '@/service'
import { BASE_URL } from '@/util'
export default {
  components: {
    upload,
    cropperImg,
    cropperupload
  },
  data() {
    return {
      visible: false,
      cropperImg: '',
      fixedNumber: [2, 1],
      fixedNumberlist: [1.5, 1],
      optionHeigth: 600,
      optionWidth: 1200,
      optionHeigthList: 600,
      optionWidthList: 900,
      info: {
        productId: '',
        faceImg: [],
        loopImageList: []
      },
      valuelistF: [],
      valuelistC: [],
      action: BASE_URL + '/product/file/upload/path'
    }
  },
  computed: {
    disableCro() {
      console.log(this.info.loopImageList.length >= 6)
      return this.info.loopImageList.length >= 6
    }
  },
  methods: {
    // 获取列表
    get_bannerlist() {
      bannerlist({ productId: this.info.productId }).then((res) => {
        console.log(res)
        this.info.faceImg = [res.faceImg]
        this.info.loopImageList = res.loopImageList
        this.visible = true
      })
    },
    // 提交更改
    get_bannerupdate() {
      let obj = { ...this.info }
      obj.faceImg = obj.faceImg[0]
      obj.loopImageList.forEach((item, index) => {
        obj.loopImageList[index] = typeof item === 'object' ? item.path : item
      })
      bannerupdate(obj).then((res) => {
        console.log(res)
        this.$messageSend.success('保存成功')
        this.$emit('updataDetails')
      })
    },
    open(val) {
      this.info.productId = val
      this.get_bannerlist()
    },
    // 上传截图
    upload_getCrofile(formdata, type) {
      uploadfile(formdata).then((res) => {
        console.log(res)
        if (type === 1) {
          this.info.faceImg = [res.path]
        } else {
          this.info.loopImageList.push(res.path)
        }
      })
    },
    handleOk() {
      if (this.info.faceImg.length === 0) {
        this.$messageSend.error('请选择一张封面图')
      } else if (this.info.loopImageList.length < 2) {
        this.$messageSend.error('请选择至少两张Banner图')
      } else {
        this.visible = false
        this.get_bannerupdate()
      }
    },
    handleCancel() {
      this.visible = false
    },
    // banner
    input(url) {
      this.info.faceImg = url
      console.log(url)
      console.log(this.info.faceImg)
    },
    // list
    inputlist(url) {
      this.info.loopImageList = url
      console.log(url)
    },
    // 上传裁剪图片
    getCrofile(file) {
      let formdata = new FormData()
      formdata.append('file', file)
      this.upload_getCrofile(formdata, 1)
    },
    getCrofileList(file) {
      console.log('oovo')
      let formdata = new FormData()
      formdata.append('file', file)
      this.upload_getCrofile(formdata, 2)
    }
  }
}
</script>

<style lang="scss">
.copywriting {
  .ant-modal {
    width: 815px !important;
    .imgmain > :first-child {
      width: 96px;
    }
    .imgmain {
      display: flex;

      .upload {
        .ant-upload.ant-upload-select-picture-card {
          width: 100px;
          height: 46px;
          margin-bottom: 6px;
          background-color: rgba(0, 0, 0, 0.04);
        }
        .ant-upload-list-picture-card-container {
          width: 100px;
          height: 46px;
        }
        .ant-upload-list-picture-card .ant-upload-list-item {
          width: 100%;
          height: 100%;
          margin: 0 5px 5px 0;
          padding: 0;
          overflow: hidden;
          border-radius: 4px;
          border: 0;
        }

        .ant-upload {
          padding: 0;
        }
        .ant-upload-picture-card-wrapper {
          display: flex;
        }
        .p {
          width: 580px;
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #f5894e;
          line-height: 20px;
          margin-top: 6px;
          margin-bottom: 0;
        }
      }
      .bottom {
        .ant-upload.ant-upload-select-picture-card {
          width: 90px;
          height: 60px;
        }
        .ant-upload-list-picture-card-container {
          width: 90px;
          height: 60px;
        }
        .ant-upload-list-picture-card .ant-upload-list-item {
          width: 100%;
          height: 100%;
        }
      }
      .croImg {
        width: 100px;
        height: 46px;
        background: rgba(0, 0, 0, 0.04);
        border-radius: 4px;
        border: 1px dashed rgba(0, 0, 0, 0.15);
        line-height: 46px;
        text-align: center;
      }
    }
  }
}
</style>
